<template>
  <div class="bottom-view">
    <!-- 左边 -->
    <el-card class="view" shadow="hover">
      <template #header>
        <div>关键字搜索</div>
      </template>
      <div class="search-view">
        <div class="chart-view">
          <div class="chart">
            <div class="title">搜索用户量</div>
            <div class="count">123,123</div>
            <v-chart :option="getOption('userList', '搜索用户量')"></v-chart>
          </div>
          <div class="chart">
            <div class="title">数字</div>
            <div class="count">345,345</div>
            <v-chart :option="getOption('countList', '搜索用户量')"></v-chart>
          </div>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" style="margin-top: 20px">
          <el-table-column prop="rankNo" label="排名"></el-table-column>
          <el-table-column prop="word" label="关键字"></el-table-column>
          <el-table-column prop="count" label="搜索数量"></el-table-column>
          <el-table-column prop="user" label="搜索用户数"></el-table-column>
          <el-table-column prop="range" label="搜索占比"></el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination v-model:currentPage="current" v-model:page0-size="pageSize" layout="prev,pager,next" :total="tableAllData.length" style="margin-top: 10px"></el-pagination>
      </div>
    </el-card>

    <!-- 右边 -->
    <el-card class="view" shadow="hover">
      <template #header>
        <div>分类销售排行</div>
        <el-radio-group v-model="selectRadio" size="small">
          <el-radio-button label="品类"></el-radio-button>
          <el-radio-button label="商品"></el-radio-button>
        </el-radio-group>
      </template>
      <div class="search-view">
        <v-chart :option="getPieOption()"></v-chart>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
export default {
  name: "BottomView",
};
</script>
<script lang="ts" setup>
import { ref, computed } from "vue";
import { useDataStore } from "../../../stores/reportData";
import useFormat from "../../../hooks/useFormat";
const selectRadio = ref("品类");

const dataStore = useDataStore();
const { numberFormat } = useFormat();
// 准备表格和分页组件需要的数据
const current = ref(1);
const pageSize = ref(5);
const searchWord = computed(() => dataStore.reportData.searchWord);
const saleRank = computed(() => dataStore.reportData.saleRank);

const tableAllData = computed(() => {
  // 如果没有数据  则直接返回一个空数组
  if (!searchWord.value) return [];
  return searchWord.value.map((item, index) => ({
    ...item,
    rankNo: index + 1, //排名
    range: ((item.user / item.count) * 100).toFixed(2) + "%",
  }));
});

// 分页的数据
const tableData = computed(() => {
  return tableAllData.value.slice((current.value - 1) * pageSize.value, current.value * pageSize.value);
});

//计算一个数据
const lineCharData = computed(() => {
  var data = {
    wordList: [] as any, //关键字数据
    userList: [] as any, //用户数数组
    countList: [] as any, // 搜索数数组
  };
  // x轴的数据
  // 关键词的搜索数据
  // 搜索用户量的数据
  // 遍历所有的数据
  if (tableAllData.value && tableAllData.value.length > 0) {
    tableAllData.value.forEach((item) => {
      // item.user   用户数
      // item.count  搜索数
      // item。word  关键词
      data.wordList.push(item.word);
      data.userList.push(item.user);
      data.countList.push(item.count);
    });
  }
  return data;
});

// 再计算一个属性
const pieCharData = computed(() => {
  const data = {
    categoryList: [] as any, // 品类的数组
    categoryTotal: 0, //品类的总数
    goodsList: [] as any, //产品的数组
    goodsTotal: 0, //产品的总数
  };
  if (saleRank.value) {
    // 品类的数组数据，品类的总数
    // 商品的数组数据，商品的总数
    const {
      category: { axisX: axisX1, data1 },
      goods: { axisX: axisX2, data1: data2 },
    } = saleRank.value;

    // axisX 和 data1   属于category的
    // axisX2和 data2   属于goods的
    // 先计算categoryTotal的总数
    const total1 = data1.reduce((pre, item) => pre + item, 0);
    data.categoryTotal = total1; //计算的是品类的总数数据
    // 遍历axisX1的数组数据
    axisX1.forEach((item, index) => {
      // 计算比例
      const percent = ((data1[index] / total1) * 100).toFixed(2) + "%";
      data.categoryList.push({
        name: item + "|" + percent,
        value: data1[index],
        percent,
        labelName: item,
      });
    });

    // 先计算goodsTotal的总数
    const total2 = data2.reduce((pre, item) => pre + item, 0);
    data.goodsTotal = total2; //计算的是品类的总数数据
    // 遍历axisX数组数据
    axisX2.forEach((item, index) => {
      // 计算比例
      const percent = ((data2[index] / total2) * 100).toFixed(2) + "%";
      data.goodsList.push({
        name: item + "|" + percent,
        value: data2[index],
        percent,
        labelName: item,
      });
    });
  }
  return data;
});

// 左图表数据
const getOption = (listName: "userList" | "countList", name: string) => {
  return {
    xAxis: {
      data: lineCharData.value.wordList, //关键词数组
      boundaryGap: false, //不留白
    },
    yAxis: { show: false },
    series: [
      {
        type: "line",
        data: lineCharData.value[listName],
        smooth: true, //圆滑
        areaStyle: { color: " #c7e7ff" },
        itemStyle: { opacity: 0 },
        lineStyle: { color: "#5fbbff" },
      },
    ],
    grid: { left: 0, right: 0, top: 0, bottom: 0 },
    tooltip: { trigger: "axis" },
  };
};

// 右图表数据
const getPieOption = () => {
  // 吧品类和商品的信息数据和总数获取到
  const { categoryList, categoryTotal, goodsTotal, goodsList } = pieCharData.value;
  // 饼图展示的数据
  const list = selectRadio.value === "品类" ? categoryList : goodsList;
  const total = selectRadio.value === "品类" ? categoryTotal : goodsTotal;
  return {
    title: [
      {
        text: `${selectRadio.value}分布`,
        textStyle: {
          color: "#666",
          fontSize: 14,
        },
        left: 20,
        top: 20,
      },
      {
        text: "累计订单量",
        subtext: `${total}`,
        textStyle: {
          color: "#999",
          fontSize: 14,
        },
        subtextStyle: {
          color: "#333",
          fontSize: 28,
        },
        left: "34.5%",
        top: "42.5%",
        textAlign: "center",
      },
    ],
    legend: {
      top: "5%",
      left: "center",
      orient: "vertical",
      top: "middle",
      left: "70%",
      textStyle: { color: "#8c8c8c" },
    },
    series: [
      {
        name: `${selectRadio.value}`,
        type: "pie",
        radius: ["35%", "50%"], //半径的大小
        center: ["35%", "50%"], // 圆心的位置
        avoidLabelOverlap: false, //不开启标签重叠
        itemStyle: {
          borderRadius: 2,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          position: "outside",
          formatter: function (params: any) {
            return params.data.labelName;
          },
        },
        labelLine: {
          length: 7,
          length2: 5,
        },
        data: list,
      },
    ],
    tooltip: {
      trigger: "item",
      formatter: function (params: any) {
        return `${selectRadio.value}分布<br/>
                ${params.marker + params.data.labelName}<br/>
                ${params.marker}数量:${params.value}<br/>
                ${params.marker}占比:${params.percent}%<br/>
        `;
      },
    },
  };
};
</script>
<style lang="scss" scoped>
.bottom-view {
  display: flex;
  margin-top: 20px;
  .view {
    flex: 1;
    &:first-child {
      margin-right: 10px;
    }
    &:last-child {
      margin-left: 10px;
    }
    :deep(.el-card__header) {
      display: flex;
      height: 60px;
      justify-content: space-between;
    }
  }
  .search-view {
    height: 400px;
    .chart-view {
      display: flex;
      .chart {
        flex: 1;
        &:first-child {
          margin-right: 5px;
        }
        &:last-child {
          margin-left: 5px;
        }
        .title {
          font-size: 14px;
          color: #999;
        }
        .count {
          font-size: 22px;
          color: #333;
          font-weight: bold;
          letter-spacing: 2px;
        }
        .echarts {
          height: 50px;
        }
      }
    }
  }
}
</style>
